<template>
  <view class="container">
    <form @submit="handleSubmit">
      <view class="form-item">
        <input 
          class="input" 
          type="text" 
          v-model="form.username" 
          placeholder="请输入用户名"
        />
      </view>
      <view class="form-item">
        <input
          class="input"
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
        />
      </view>
      <button form-type="submit" class="submit-btn">登录</button>
    </form>
  </view>
</template>

<script>
import { request } from '@/utils/request'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit(e) {
      if (!this.form.username || !this.form.password) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' })
        return
      }

      try {
        const res = await request.post('/api/login', this.form)
        uni.setStorageSync('token', res.data.token)
        uni.switchTab({ url: '/pages/index/index' })
      } catch (error) {
        uni.showToast({ title: error.data.message || '登录失败', icon: 'none' })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.input {
  height: 80rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 0 20rpx;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #007AFF;
  color: white;
}
</style>